<template>
	<view class="content">
		<view class="topp">
			<view :class="zhuantai == 1 ? 'topp_a' : 'topp_b'" @click="tiao_shi_a"> 全部 </view>
			<view :class="zhuantai == 2 ? 'topp_a' : 'topp_b'" @click="tiao_shi_b"> 去完成 </view>
			<view :class="zhuantai == 3 ? 'topp_a' : 'topp_b'" @click="tiao_shi_c"> 审核中 </view>
			<view :class="zhuantai == 4 ? 'topp_a' : 'topp_b'" @click="tiao_shi_d"> 已完成 </view>
			<view :class="zhuantai == 5 ? 'topp_a' : 'topp_b'" @click="tiao_shi_e"> 审核失败 </view>
		</view>

		<view class="" v-if="data.length > 0" style="padding-bottom: 120rpx; background-color: #f5f8fd">
			<view class="cen_a" v-for="(i, index) in data" :key="index">
				<view class="cen_a_a" @click="myTask(i)" style="width: 400rpx">
					<p class="tit_a" style="display: flex; justify-content: space-between">
						<text style="width: 400rpx" class="ddddd">
							{{ i.title }}
						</text>
					</p>
					<p class="tit_b" v-if="i.status == 0">截止时间：{{ i.over | date("yy.mm.dd hh:MM") }}</p>
					<p class="tit_b" v-else>提交时间：{{ i.update_time }}</p>
				</view>
				<view class="cen_a_b" @click="myTask(i)">
					<p style="color: red; font-size: 30rpx; text-align: right; line-height: 50rpx; height: 50rpx">赏{{ i.price }}元</p>
					<p class="zhuan_tai_c" v-if="i.status !== 3">
						{{ i.state }}
					</p>
					<p class="zhuan_tai_c" v-if="i.status == 3">
						{{ i.state }}
						<!-- <p v-if="i.status==3" style="text-align: right;overflow: hidden; text-overflow:ellipsis;white-space: nowrap;">
							原因：{{i.note}}
						</p> -->
					</p>
				</view>
			</view>
			<u-loadmore :status="status" />
		</view>

		<u-empty text="订单为空!" mode="order" v-else></u-empty>
	</view>
</template>

<script>
export default {
	data() {
		return {
			status: "nomore",
			zhuantai: 1,
			type: 0,
			page: 1,
			limit: 10,
			data: [],
			uid: "",
		};
	},
	onShow() {
		(this.page = 1), (this.limit = 10), (this.data = []), this.task();
	},
	onLoad() {
		//this.task();
		uni.setNavigationBarColor({
			frontColor: "#ffffff",
			backgroundColor: "#FA341B",
			animation: {
				duration: 400,
				timingFunc: "easeIn",
			},
		});
	},
	methods: {
		myTask(i) {
			console.log("i :>> ", i);
			uni.navigateTo({
				url: "./Home/xiangqing?tid=" + i.tid + "&id=" + i.id + "&status=" + i.status,
			});
		},
		async task() {
			//  this.zhuantai = 5

			let obj = {
				uid: uni.getStorageSync("uid"),
				type: this.type,
				page: this.page,
				limit: this.limit,
			};
			const res = await this.$u.post("api/task/task_list", obj, {});
			if (!res.code) uni.$showMsg();

			if (this.zhuantai == 5) {
				let x = [...this.data, ...res.data];

				this.data = x.filter((i) => {
					return i.status == 5;
				});

				this.page++;
				this.total = res.total;
			} else {
				this.data = [...this.data, ...res.data];
				this.page++;
				this.total = res.total;
				console.log("res >>  ", res);
			}
		},
		tiao_shi_a() {
			(this.data = []), (this.page = 1), (this.limit = 10), (this.type = 0), (this.zhuantai = 1), this.task();
		},
		tiao_shi_b() {
			(this.data = []), (this.page = 1), (this.limit = 10), (this.type = 1), (this.zhuantai = 2), this.task();
		},
		tiao_shi_c() {
			(this.data = []), (this.page = 1), (this.limit = 10), (this.type = 2), (this.zhuantai = 3), this.task();
		},
		tiao_shi_d() {
			(this.data = []), (this.page = 1), (this.limit = 10), (this.type = 3), (this.zhuantai = 4), this.task();
		},
		tiao_shi_e() {
			(this.data = []), (this.page = 1), (this.limit = 10), (this.type = 4), (this.zhuantai = 5), this.task();
		},
		shenshu(i) {
			uni.navigateTo({
				url: "./Home/xiangqing?tid=" + i.tid + "&id=" + i.id,
			});
		},
	},
	onReachBottom() {
		if (this.data.length >= this.total) {
			this.status = "nomore";
		} else {
			this.status = "loading";
			this.task();
		}
	},
};
</script>

<style lang="scss" scoped>
/deep/.u-load-more-wrap {
	margin-top: 30rpx !important;
}
.content {
	width: 100%;
	height: 100vh;
}
.topp {
	width: 100%;
	height: 70rpx;
	background-color: #fa341b;
	display: flex;
	justify-content: space-around;
	align-items: center;
	.topp_a {
		color: #ffffff;
		//width: 90rpx;
		height: 25px;
		text-align: center;
		border-bottom: 4rpx solid #ffffff;
	}
	.topp_b {
		color: #ffffff;
		//width: 90rpx;
		height: 25px;
		text-align: center;
	}
}
.cen_a {
	width: 690rpx;
	margin-left: 30rpx;
	margin-top: 20rpx;
	height: 150rpx;
	background-color: #ffffff;
	border-radius: 10rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	.ddddd {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.cen_a_a {
		width: 520rpx;
		height: 150rpx;

		.tit_a {
			width: 650rpx;
			height: 50rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			line-height: 70rpx;
			margin-left: 20rpx;
			color: #333333;
			span {
				margin-left: 10rpx;
			}
		}
		.tit_b {
			width: 480rpx;
			height: 34rpx;
			font-size: 24rpx;
			margin-top: 45rpx;
			margin-left: 20rpx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 34rpx;
			color: #333333;
		}
	}
	.cen_a_b {
		width: 270rpx;
		height: 150rpx;
		margin-right: 10rpx;
		.zhuan_tai {
			width: 220rpx;
			height: 60rpx;
			text-align: center;
			line-height: 60rpx;
			font-weight: bold;
			color: #fe3548;
		}
		.zhuan_tai_b {
			width: 220rpx;

			height: 60rpx;
			text-align: center;
			line-height: 60rpx;
			font-weight: bold;
			color: #fbc038;
		}
		.zhuan_tai_c {
			width: 265rpx;
			height: 60rpx;
			text-align: right;
			margin-top: 20rpx;
			line-height: 60rpx;
			font-weight: bold;
			color: #2071ce;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
}
</style>
